<!--这个是整屏的video-->
<template>
    <div
            id="Video"
            class="video-components"
    >
        <div class="video-wrap">
            <!--<img class="video-icon" v-if="!videoMsg.btnImg && videoMsg.isNeedPlayBtn && videoShow" id="videoBtn" @click="videoControls" :src="staticImageUrl('images/video_play_btn.png')" alt=""/>-->
            <img
                    class="video-icon"
                    v-if="videoBtnShow && iosShowPlayBtn"
                    id="videoBtn"
                    @click="videoControls(true)"
                    src="../../../assets/images/common/pause_icon.png"
                    alt=""
            />
            <slot
                    name="videoIcon"
                    v-else-if="videoMsg.btnImg"
            ></slot>
            <!--
                   x5-video-player-type="h5"
                   video-player-type="h5"
                    x5-video-player-fullscreen='true'
                      x5-video-ignore-metadata='true'
                      :x5-playsinline="isIphone && isEnd"
                          :playsinline="isIphone && isEnd"

                    :x5-playsinline="isIphone"
                    :playsinline="isIphone"
                    :webkit-playsinline="isIphone"

                    :x5-playsinline="true"
                    :playsinline="true"
                    :webkit-playsinline="true"

                    controls
                    x5-video-player-fullscreen='true'
                    x5-video-ignore-metadata='true'



                  -->
            <video
                    ref="video"
                    id="fullVideo"
                    v-if="videoShow"
                    class="js_myVideo myVideo"
                    :x5-playsinline="isIphone"
                    :playsinline="isIphone"
                    :webkit-playsinline="isIphone"
                    x5-video-player-type="h5"
                    video-player-type="h5"
                    x5-video-player-fullscreen='true'
                    x5-video-ignore-metadata='true'
                    x-webkit-airplay="true"
                    preload
                    :loop="isAndroid || videoMsg.loop"
                    :poster="videoMsg.poster"
                    :autoplay="videoMsg.autoplay"
                    x5-video-orientation="portraint"
                    video-orentation="portraint"
                    @ended="playEnd($event)"
            >
                <source
                        :src="videoMsg.videoUrl"
                        type='video/mp4'
                >
                您的浏览器不支持 video 标签。
            </video>
            <div class="full-video-bg"></div>
            <div
                    @click="videoControls(false)"
                    ref="videoDefaultPoster"
                    class="video-default-poster"
            ></div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Video",
        props: {
            videoPropsMsg: {
                type: Object
            },
            isNotAutoplay: Boolean //是否可以自动播放到下一个
        },
        data() {
            return {
                videoShow: true,
                videoBtnShow: true,
                iosShowPlayBtn:true,
                isPlay: false,
                // isEnd:false,
                playBtnShow: false,
                video: "",
                videoPlayTimer: null,
                videoMsg: {
                    loop: true,
                    defaultPlayEnd: false,
                    isNeedPopstate: false,
                    videoUrl: "",
                    btnImg: "",
                    poster: "",
                    isNeedDefaultPoster: true,
                    isNeedPlayBtn: true,
                    autoplay: true,
                    isExitCloseVideo: true //安卓中退出播放是否关掉视频在开启
                }
            };
        },
        created() {
            /*是否循环播放*/
            if (this.isNotAutoplay) {
                this.videoMsg.loop = true;
            } else {
                this.videoMsg.loop = false;
            }
            if(this.isIphone){
                this.iosShowPlayBtn = false;
            }else{
                this.iosShowPlayBtn = true;
            }
            setTimeout(()=>{
                this.iosShowPlayBtn = true;
            },1500)
        },
        mounted() {
            // let videoContext =this.$refs.video;
            // videoContext.addEventListener('ended', ()=>{
            //     if ( this.isAndroid ) {
            //         videoContext.play();
            //         setTimeout(() => {
            //             videoContext.pause();
            //         }, 100)
            //     }
            // }
            let that = this;
            this.videoMsg = Object.assign({}, this.videoMsg, this.videoPropsMsg);
            if (this.videoMsg.isNeedPopstate) {
                this.popstate();
            }
            if (this.isAndroid && this.v_is_weixin) {
                this.videoMsg.autoplay = false;
                this.videoMsg.loop = true;
                // this.videoBtnShow = true;
                // this.isPlay = false;
            } else if (this.isIphone && !this.v_is_weixin) {
                this.videoMsg.autoplay = true;
                // this.videoBtnShow = true;
                // this.isPlay = true;
            } else if (this.isAndroid && !this.v_is_weixin) {
                this.videoMsg.autoplay = false;
                this.videoMsg.loop = false;
                // this.videoBtnShow = true;
                // this.isPlay = false;
            } else {
                this.videoMsg.autoplay = true;
                // this.videoBtnShow = false;
                // this.isPlay = true;
            }
            if (this.videoMsg.poster) {
                $(".full-video-bg").css({
                    backgroundImage: "url(" + this.videoMsg.poster + ")"
                });
            }
            var myVideo = this.$refs.video;
            myVideo.addEventListener("pause", function () {
                that.videoBtnShow = true;
                if (that.videoPlayTimer) {
                    clearInterval(that.videoPlayTimer);
                }
            });
            myVideo.addEventListener("ended", function () {
                that.videoBtnShow = true;
                if (that.videoPlayTimer) {
                    clearInterval(that.videoPlayTimer);
                }
            });
            myVideo.addEventListener("play", function () {
                that.videoBtnShow = false;
                // that.videoPlayTimer = setInterval(()=>{
                //     // if(myVideo.duration >= myVideo.currentTime +1){
                //     // }
                // },1000)
            });
        },
        methods: {
            popstate() {
                let that = this;
                let bool = false;
                //先拿到现在的url
                var nowUrl = location.href;
                /*让手机点击后退之后还是原来的地址*/
                window.history.pushState(null, null, nowUrl);
                window.addEventListener(
                    "popstate",
                    function (e) {
                        if (bool && that.videoShow) {
                            that.isPlay = false;
                            that.videoBtnShow = true;
                        }
                    },
                    false
                );
                setTimeout(() => {
                    bool = true;
                }, 10);
            },
            videoControls(play=false) {
                let that = this;
                if(play){
                    this.isPlay = false;
                }
                if (!this.isPlay) {
                    this.$refs.video.play();
                    this.isPlay = true;
                    this.videoBtnShow = false;

                    let i = 0;
                    var myVideo = this.$refs.video;
                    if (this.isAndroid) {
                        /*安卓退出播放的时候关闭视频*/
                        if (this.videoMsg.isExitCloseVideo) {
                            myVideo.addEventListener("pause", function () {
                                that.closeVideo();
                            });
                        }
                        window.scrollTo(0, 1000000);
                    }
                } else {
                    this.$refs.video.pause();
                    this.isPlay = false;
                    this.videoBtnShow = true;
                }
            },
            playVideo() {
                this.isPlay = true;
                // this.videoBtnShow = false;
                $("body audio").each((audioIndex, audioEle) => {
                    audioEle.pause();
                    $(".new-open-music").hide();
                    $(".new-close-music").show();
                });
                if (this.$refs && this.$refs.video) {
                    setTimeout(() => {
                        if (typeof this.$refs.video.play == "function") {
                            this.$refs.video.play();
                        }
                    }, 100);
                }
            },
            closeVideo() {
                this.$refs.video.pause();
                this.videoShow = false;
                setTimeout(() => {
                    this.videoShow = true;
                    this.videoBtnShow = true;
                }, 100);
            },
            /*让手机点击后退之后还是原来的地址*/
            pushHistory() {
                let params = window.location.href;
                window.history.pushState(null, null, params);
            },
            playEnd(e) {
                this.isEnd = true;
                setTimeout(() => {
                    this.isEnd = false;
                }, 500);
                if (this.videoMsg.defaultPlayEnd) {
                    this.closeVideo();
                } else {
                    this.$emit("playEndFn", 0);
                }
            }
        },
        watch: {
            videoPropsMsg(val) {
                this.videoMsg = Object.assign({}, this.videoMsg, val);
            },
            isNotAutoplay(val) {
                if (val) {
                    this.videoMsg.loop = true;
                } else {
                    this.videoMsg.loop = false;
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .video-border {
        background: rgba(0, 0, 0, 1);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .myVideo {
        width: 100%;
        width: 100vw;
        min-height: 100%;
        min-height: 100vh;
        position: relative;
        object-position: center center;
        z-index: 1;
        background-color: transparent;
    }

    .video-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: transparent;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .video-icon {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        width: 1rem;
        height: 1rem;
    }

    .video-components {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        margin: auto;
        height: 100%;
    }

    .video-default-poster {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-image: linear-gradient(
                        to bottom,
                        rgba(0, 0, 0, 0.6) 0%,
                        rgba(0, 0, 0, 0) 30%,
                        rgba(0, 0, 0, 0) 70%,
                        rgba(0, 0, 0, 0.6) 100%
        );
    }

    .full-video-bg {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        filter: blur(40px);
        position: absolute;
        left: 0;
        top: 0;
    }
    /*.js_myVideo{*/
    /*    object-fit: cover!important;*/
    /*    width: 100%!important;*/
    /*    height: 80vh!important;*/
    /*}*/
</style>